<!-- 文章详情 -->
<template>
  <PageContainer :form="form" />

  <div class="page-main md:w-screen-xl m-auto bg-white rounded-lg">
    <div class="p-4 leading-7" v-html="form?.content">
    </div>
  </div>

</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();


// 配置信息
const { form, assignFields } = useFormData<Article>({
  // 文章id
  articleId: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  parentName: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: undefined,
  // 文章内容
  content: undefined,
  // 虚拟阅读量
  virtualViews: undefined,
  // 实际阅读量
  actualViews: undefined,
  // 用户ID
  userId: undefined,
  // 用户昵称
  nickname: undefined,
  // 账号
  username: undefined,
  // 用户头像
  userAvatar: undefined,
  // 所属门店ID
  shopId: undefined,
  //
  likes: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: undefined,
  // 状态
  status: undefined,
  // 创建时间
  createTime: undefined,
  // 更新时间
  updateTime: undefined
});

// 请求数据
const reload = async () => {

  // 存在spm(优先级高)
  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-article/' + getIdBySpm(5))
  if (nav.value?.data) {
    assignFields(nav.value.data)
  }

  // seo
  useHead({
    title: `${form.title} - ${website.value.websiteName}`,
    bodyAttrs: {
      class: "page-container",
    }
  });
  // 面包屑
  breadcrumb.value = form
}

watch(
    () => route.path,
    (path) => {
      console.log(path,'=>Path')

      reload();
    },
    { immediate: true }
);
</script>
